<template>
  <div>

    <!--
      el-table
         :data 数据
         border 显示边框
      el-table-column
         align="center" 居中
         prop 对应数据的字段名
         lable 标题
         width 宽度
      序号:
      el-table-column
         type="index"

      自定义内容
       el-table-column
         template
           v-slot="{$index,row}"
           $index下标
           row 每行数据

    -->
    <el-table :data="tableData">
      <el-table-column prop="date" label="时间" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="province" label="省" />
      <el-table-column prop="address" label="区" />
      <el-table-column prop="date" label="街" />
      <el-table-column label="操作">
        <template v-slot="{row}">
          <div>
            {{ row.name }}
            <el-button type="primary">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {

  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  }

}
</script>

<style>

</style>
